<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../public/layui/css/layui.css"/>
    <link rel="stylesheet" href="../public/css/basic.css"/>
    <link rel="stylesheet" href="../public/css/manage.css"/>
    <script src="../public/js/jquery-1.11.1.min.js"></script>
    <title>产品追溯</title>
    <style>
        .add{background-color: #009688;color: #fff;border: none;padding:5px 10px;border-radius: 0.3em;}
        .up img{width: 300px;height: 400px;margin: 30px}
    </style>
</head>
<body>
<form action="" class="layui-form">
    <div class="main">
        <div class="set-main">
            <div class="layui-upload">
                <button type="button" class="layui-btn layui-btn-normal" id="up-pic">上传产品图片</button>
                <div class="layui-upload-list">
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th>文件名</th>
                            <th>大小</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>

                        <tbody id="pic-list"></tbody>

                    </table>
                </div>

            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">生产区域</label>
                <div class="layui-input-block">
                    <select name="interest" >
                        <option value=""></option>
                        <option value="0">区域1</option>
                        <option value="1" selected="">区域2</option>
                        <option value="2">区域3</option>
                        <option value="3">区域4</option>
                        <option value="4">区域5</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">生产区块</label>
                <div class="layui-input-block">
                    <select  >
                        <option value=""></option>
                        <option value="0">区块1</option>
                        <option value="1" selected="">区块2</option>
                        <option value="2">区块3</option>
                        <option value="3">区块4</option>
                        <option value="4">区块5</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">生产批次</label>
                <div class="layui-input-block">
                    <select  >
                        <option value=""></option>
                        <option value="0">批次1</option>
                        <option value="1" selected="">批次2</option>
                        <option value="2">批次3</option>
                        <option value="3">批次4</option>
                        <option value="4">批次5</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">产品状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="zt" value="正式销售" title="正式销售" checked="">
                    <input type="radio" name="zt" value="预售" title="预售">

                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">上市时间</label>
                <div class="layui-input-block" style="width: 200px">
                    <input type="text" class="layui-input" id="date1" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">采收日期</label>
                <div class="layui-input-block" style="width: 200px">
                    <input type="text" class="layui-input" id="date2" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">总量</label>
                <div class="layui-input-block">
                    <input type="text" name="title"  placeholder="请输入总量" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">单位</label>
                <div class="layui-input-block">
                    <select  >
                        <option value=""></option>
                        <option value="0">kg</option>
                        <option value="1" selected="">t</option>
                        <option value="2">g</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">产地</label>
                <div class="layui-input-block">
                    <input type="text"   placeholder="请输入产地省份" class="layui-input">

                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">线上地址</label>
                <div class="layui-input-block">
                    <input type="text"   placeholder="请输入淘宝店链接" class="layui-input">

                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">线下地址</label>
                <div class="layui-input-block">
                    <input style="margin-top: 5px" class="add" type="button" value="添加销售地址" onclick='addNewLine()' />
                </div>
                <div id="lc_content" style="margin-left: 110px">
                    <div id="lc" style="clear: both" >
                        <input style="width: 300px"   type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入销售地址" class="layui-input layui-inline layui-input-inline fl">
                        <button class="layui-inline add fl" type="button"  style="margin-top: 5px" onclick="delect('lc')">删除</button>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
               <div class="layui-upload">
                  <button type="button" class="layui-btn" id="up-pic1">资质认证图片上传</button>
                  <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                      请上传正面照片：
                     <div class="layui-upload-list up" id="up-pic1s"></div>
                   </blockquote>
               </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="up-pic2">质检报告图片上传</button>
                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                        请上传正面照片：
                        <div class="layui-upload-list up" id="up-pic2s"></div>
                    </blockquote>
                </div>
            </div>
            <div  class="mid">
                <button type="button" class="layui-btn" id="testListAction">提交</button>
            </div>

        </div>




    </div>
</form>

<script src="../public/layui/layui.all.js"></script>
<script>

    layui.use(['form','laydate'], function() {
        var form = layui.form;
        var laydate = layui.laydate;
        laydate.render({
            elem: '#date1'
        });
        laydate.render({
            elem: '#date2'
        });
    })
//限制图片上传数量4
    var limits=4;
    var acount=0;
    layui.use('upload',function(){
        upload=layui.upload;
    })
    //多文件列表示例
    var demoListView = $('#pic-list')
            ,uploadListIns = upload.render({
                elem: '#up-pic'
                ,url: '/upload/'
                ,accept: 'file'
                ,multiple: true
                ,auto: false
                ,bindAction: '#testListAction'
                ,choose: function(obj){
                    var files = obj.pushFile(); //将每次选择的文件追加到文件队列
                    obj.preview(function(index, file, result){
                        acount++;
                        if(acount>limits){
                            layer.msg('最多选择'+limits+'张图片上传');
                            acount--;
                            delete files[index];
                        }else{
                            var tr = $(['<tr id="upload-'+ index +'">'
                                ,'<td>'+'<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">' +'</td>'
                                ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
                                ,'<td>等待上传</td>'
                                ,'<td>'
                                ,'<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
                                ,'<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
                                ,'</td>'
                                ,'</tr>'].join(''));
                            //单个重传
                            tr.find('.demo-reload').on('click', function(){
                                obj.upload(index, file);
                            });

                            //删除
                            tr.find('.demo-delete').on('click', function(){
                                delete files[index]; //删除对应的文件
                                tr.remove();
                                acount--;
                            });
                            demoListView.append(tr);
                        }
                    })
                    //读取本地文件

                }
                ,done: function(res, index, upload){
                    if(res.code == 0){ //上传成功
                        var tr = demoListView.find('tr#upload-'+ index)
                                ,tds = tr.children();
                        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                        tds.eq(3).html(''); //清空操作
                        delete files[index]; //删除文件队列已经上传成功的文件
                        acount--;
                        return;
                    }
                    this.error(index, upload);
                }
                ,error: function(index, upload){
                    var tr = demoListView.find('tr#upload-'+ index)
                            ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                    tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                }
            });

    //    增加销售地址
    var count=1;
    function addNewLine()
    {
        count++;
        var str='<div style="clear: both" id="lc'+count+'">'
                +'<input  style="width: 300px"  type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入销售地址" class="layui-input layui-inline layui-input-inline fl">'
                +'<button class="layui-inline add fl" type="button" style="margin-top: 5px" onclick="delect(\'lc'+count+'\')">删除</button>'
                +'</div>'
        $('#lc_content').append(str);

    }
    function delect(id){
        var obj=""+id+"";
        document.getElementById(obj).outerHTML="";

    }

    //资质认证图片上传
    upload.render({
        elem: '#up-pic1'
        ,url: '/upload/'
        ,multiple: true
        ,before: function(obj){
            //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result){
                $('#up-pic1s').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
            });
        }
        ,done: function(res){
            //上传完毕
        }
    });
    //质检报告图片上传
    upload.render({
        elem: '#up-pic2'
        ,url: '/upload/'
        ,multiple: true
        ,before: function(obj){
            //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result){
                $('#up-pic2s').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
            });
        }
        ,done: function(res){
            //上传完毕
        }
    });
</script>


</body>
</html>